<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery测试</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css">
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>

    <script type="text/javascript">
        $(function (){
            //不传参数,是获取,传递参数是设置,这边会解析html
            // $("div").html("赵传");
            // alert($("div").html());

            //不传递参数是获取,传递参数是设置,使用text不会解析html
            // alert($("div").text());
            // $("div").text("<h1>我是div中的标题</h1>");

            //不传参数,是获取,传递参数是设置
            // $("button").click(() => {
            //     //alert($("#username").val());
            //     $("#username").val("超级程序员");
            // });

            //批量操作单选
            //当给单选设置值的时候,那么这个单选对应的这个值就会被选中
            //$(":radio").val(["radio2"]);
            //批量操作复选框的选中状态
            //设置复选框的值为对应复选框的值,那么这个复选框就会被选中
            //$(":checkbox").val(["checkbox1","checkbox3"]);

            //批量操作多选的下拉框选中状态
            //多选的下拉框设置多个值,多选设置的值就是复选框对应的值
            //$("#multiple").val(["mul2","mul3"]);

            //操作单选的下拉框选中状态
            //设置下拉的值,那么这个下拉框中value对应的值就会被选中
            //$("#single").val(["sin2"]);

            //attr
            // alert($(":checkbox:first").attr("name"));//获取
            //设置复选框的name值为abc
            // $(":checkbox:first").attr("name" , "abc");
            // alert($(":checkbox:first").attr("checked"));//undefined

            //官方觉得返回undefined是一个错误
            //alert($(":checkbox").prop("checked"));

            //使用prop  可以设置复选框全部选中和不选中
            $(":checkbox").prop("checked" , true);





        })
    </script>
</head>
<body>
<p id="text_show">
    jquery测试<br/>
    html() 可以设置和获取起始标签和结束标签中的内容   跟dom属性的innerHTML一样<br/>
    text() 可以设置和获取起始标签和结束标签中的文本 跟dom属性的innerText一样<br/>
    val()   可以设置和获取表单项的value属性值.跟dom属性的value一样<br/>

    attr() 可以设置和获取属性的值,不推荐操作checked，readOnly，selected，disabled<br/>
            attr方法还可以操作非标准的属性,比如自定义属性  anc:bbj<br/>
    prop() 可以设置和获取属性的值,只推荐操作  checked , readOnly , selected , disabled<br/>
</p>
<div>我是div标签<span>我是div中的span</span></div>
<input type="text" name="username" id="username" />
<button>操作输入框</button>

<hr />

单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>

下拉多选 ：
<select id="multiple" multiple="multiple" size="4">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
</select>
<br/>

下拉单选 ：
<select id="single">
    <option value="sin1">sin1</option>
    <option value="sin2">sin2</option>
    <option value="sin3">sin3</option>
</select>

</body>
</html>